<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Tool_man</title>
	<link rel="stylesheet" href="/static/layui/css/layui.css">
	<script src="/static/layui/layui.all.js" charset="utf-8"></script>
        <script src="/static/js/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<ul class="layui-nav" lay-filter="">
	<li class="layui-nav-item"><a href="">Tool Man  System</a></li>
</ul>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
	<legend>Auth Clone Kvm System</legend>
</fieldset>

<div style="width: 800px;margin-left: auto!important;margin-right: auto!important;">
	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
		<legend style="font-size: 20px;color:blue ;">Physics server</legend>
	</fieldset>
{% csrf_token %}
<form class="layui-form" id="sendsvcinfo" name="sendsvcinfo" action="" method='post'>
<div class="layui-form-item">
	<div class="layui-inline">
	<label class="layui-form-label">ipaddress</label>
		<div class="layui-input-inline">
		<input type="text" id="ipaddr" name="ipaddr" lay-verify="title" autocomplete="off" value="10.255.68.6" class="layui-input">
		</div>
	</div>

	<div class="layui-inline">
	<label class="layui-form-label">port</label>
		<div class="layui-input-inline">
		<input type="text" id="port" name="port" lay-verify="title" autocomplete="off" value="22"  class="layui-input">
		</div>
	</div>
</div>
  
<div class="layui-form-item">
	<div class="layui-inline">
	<label class="layui-form-label">user</label>
		<div class="layui-input-inline">
		<input type="text" id="user" name="user" lay-verify="title" autocomplete="off" value="root" class="layui-input">
		</div>
	</div>

	<div class="layui-inline">
		<label class="layui-form-label">password</label>
			<div class="layui-input-inline">
			<input type="text" id="password" name="password" lay-verify="title" autocomplete="off" value="123456"  class="layui-input">
			</div>
	</div>

	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
		<legend style="font-size: 20px;color: red;">Kvm server</legend>
	</fieldset>
<div class="layui-form-item">
	<div class="layui-inline">
	<label class="layui-form-label">tempfile</label>
		<div class="layui-input-inline">
		<input type="text" name="tempfile" lay-verify="title" autocomplete="off" value="/data/kvm/disk/demo.img" class="layui-input">
		</div>
	</div>

	<div class="layui-inline">
		<label class="layui-form-label">diskpath</label>
			<div class="layui-input-inline">
			<input type="text" name="diskpath" lay-verify="title" autocomplete="off" value="/data/kvm/disk/"  class="layui-input">
			</div>
	</div>
</div>  
<div class="layui-form-item">
	<div class="layui-inline">
	<label class="layui-form-label">xmlfile</label>
		<div class="layui-input-inline">
		<input type="text" name="xmlfile" lay-verify="title" autocomplete="off" value="/etc/libvirt/qemu/demo.xml" class="layui-input">
		</div>
	</div>

	<div class="layui-inline">
		<label class="layui-form-label">xmlpath</label>
			<div class="layui-input-inline">
			<input type="text" name="xmlpath" lay-verify="title" autocomplete="off" value="/etc/libvirt/qemu/"  class="layui-input">
			</div>
	</div>
</div>  
<div class="layui-form-item">
	<div class="layui-inline">
	<label class="layui-form-label">cpu</label>
		<div class="layui-input-inline">
		<input type="text" name="cpu" lay-verify="title" autocomplete="off" value="2" class="layui-input">
		</div>
	</div>

	<div class="layui-inline">
	<label class="layui-form-label">mem[M]</label>
		<div class="layui-input-inline">
		<input type="text" name="mem" lay-verify="title" autocomplete="off" value="4096"  class="layui-input">
		</div>
	</div>
</div>
  
<div class="layui-form-item">
	<div class="layui-inline">
	<label class="layui-form-label">netwwork</label>
		<div class="layui-input-inline">
		<input type="text" name="network" lay-verify="title" autocomplete="off" value="10.255.68" class="layui-input">
		</div>
	</div>

	<div class="layui-inline">
	<label class="layui-form-label">ip range</label>
		<div class="layui-input-inline" style="width: 100px;">
		<input type="text" name="ip_min" lay-verify="title" value="300" autocomplete="off" class="layui-input">
		</div>
		<div class="layui-form-mid">-</div>
			<div class="layui-input-inline" style="width: 100px;">
			<input type="text" name="ip_max" lay-verify="title" value="301" autocomplete="off" class="layui-input">
			</div>
		</div>
	</div>
</form>	
</div>  
  <div class="layui-form-item">
    <div class="layui-input-block">
		<button type="submit" id="submiton" class="layui-btn">commit</button>
    </div>
  </div>

        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend style="font-size: 20px;color: green;">Return info Linux Samu</legend>
        </fieldset>
<div>
<textarea readonly="readonly" id="messagecontainer" style="width: 800px;height: 100px;;margin: 1px 0 0 0;border: 1px dotted black;background: #00000096;color: #05f505;border-radius: 5px 0 0 5px;"></textarea>
</div>
    <script type="text/javascript">
    $(function () {
        $('#submiton').click(function () {
        var o = {};
        var a = $('#sendsvcinfo').serializeArray();
        $.each(a, function () {
                if (o[this.name] !== undefined) {
                        if (!o[this.name].push) {
                                o[this.name] = [o[this.name]];
                        }
                        o[this.name].push(this.value || '');
                } else {
                        o[this.name] = this.value || '';
                }
        });
            //a = $('#sendsvcinfo').serialize();
            var socket = new WebSocket("ws://" + window.location.host + "/toolman/");
            socket.onopen = function () {
                //socket.send(a);//发送数据到服务端
                socket.send(JSON.stringify(o));//发送数据到服务端
            };
            socket.onmessage = function (e) {
                $('#messagecontainer').append(e.data+'<br/>');
                var textarea = document.getElementById('messagecontainer'); 
                textarea.scrollTop = textarea.scrollHeight; 
            };
        });
    });
    </script>
</body>
</html>
